
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont hd-icon"></i>
                    <div class="name">美元</div>
                    <div class="fontclass">.hd-icon</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-dingwei"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.hd-dingwei</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-xinglijicun"></i>
                    <div class="name">行李寄存</div>
                    <div class="fontclass">.hd-xinglijicun</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-zhongbiao"></i>
                    <div class="name">钟表</div>
                    <div class="fontclass">.hd-zhongbiao</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-iconfontwifi1"></i>
                    <div class="name">wifi</div>
                    <div class="fontclass">.hd-iconfontwifi1</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-shangchengicon13"></i>
                    <div class="name">订单</div>
                    <div class="fontclass">.hd-shangchengicon13</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-momentmessage"></i>
                    <div class="name">评论</div>
                    <div class="fontclass">.hd-momentmessage</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-mjiantou"></i>
                    <div class="name">右箭头</div>
                    <div class="fontclass">.hd-mjiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-wode"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.hd-wode</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-pinglun1"></i>
                    <div class="name">评 论</div>
                    <div class="fontclass">.hd-pinglun1</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-shoucang"></i>
                    <div class="name">收 藏</div>
                    <div class="fontclass">.hd-shoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-24xiaoshireshui"></i>
                    <div class="name">24小时热水</div>
                    <div class="fontclass">.hd-24xiaoshireshui</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-fangzi-copy"></i>
                    <div class="name">房子</div>
                    <div class="fontclass">.hd-fangzi-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-zuanshi"></i>
                    <div class="name">钻石</div>
                    <div class="fontclass">.hd-zuanshi</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-rili-copy"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.hd-rili-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-gonglve"></i>
                    <div class="name">攻略</div>
                    <div class="fontclass">.hd-gonglve</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-chuchalvyouchuxing"></i>
                    <div class="name">出差 旅游 出行</div>
                    <div class="fontclass">.hd-chuchalvyouchuxing</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-dianzan"></i>
                    <div class="name">点赞</div>
                    <div class="fontclass">.hd-dianzan</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-rili"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.hd-rili</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-sousuo"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.hd-sousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-chuxingtianshu"></i>
                    <div class="name">分期－出行天数</div>
                    <div class="fontclass">.hd-chuxingtianshu</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-dianping"></i>
                    <div class="name">点评</div>
                    <div class="fontclass">.hd-dianping</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-youji"></i>
                    <div class="name">游记</div>
                    <div class="fontclass">.hd-youji</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-yduishanchu"></i>
                    <div class="name">YDUI-删除</div>
                    <div class="fontclass">.hd-yduishanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-youji1"></i>
                    <div class="name">游记</div>
                    <div class="fontclass">.hd-youji1</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-raider"></i>
                    <div class="name">攻略</div>
                    <div class="fontclass">.hd-raider</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-wode1"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.hd-wode1</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-chuifengji"></i>
                    <div class="name">吹风机</div>
                    <div class="fontclass">.hd-chuifengji</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-mianfeixishuyongpin"></i>
                    <div class="name">免费洗漱用品</div>
                    <div class="fontclass">.hd-mianfeixishuyongpin</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-keyuding"></i>
                    <div class="name">可预订</div>
                    <div class="fontclass">.hd-keyuding</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-wode2"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.hd-wode2</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-icon_smoke"></i>
                    <div class="name">可吸烟</div>
                    <div class="fontclass">.hd-icon_smoke</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-xiyan"></i>
                    <div class="name">吸烟</div>
                    <div class="fontclass">.hd-xiyan</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-huiyishi"></i>
                    <div class="name">会议室</div>
                    <div class="fontclass">.hd-huiyishi</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-shizhong"></i>
                    <div class="name">时钟</div>
                    <div class="fontclass">.hd-shizhong</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-icon-yxj-complaint"></i>
                    <div class="name">投诉</div>
                    <div class="fontclass">.hd-icon-yxj-complaint</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-renwu"></i>
                    <div class="name">人物</div>
                    <div class="fontclass">.hd-renwu</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-xianlu"></i>
                    <div class="name">线路</div>
                    <div class="fontclass">.hd-xianlu</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-xianlu1"></i>
                    <div class="name">线路</div>
                    <div class="fontclass">.hd-xianlu1</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-tingchechang"></i>
                    <div class="name">停车场</div>
                    <div class="fontclass">.hd-tingchechang</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-jiesongfuwu"></i>
                    <div class="name">接送服务</div>
                    <div class="fontclass">.hd-jiesongfuwu</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-lipinqia"></i>
                    <div class="name">礼品卡</div>
                    <div class="fontclass">.hd-lipinqia</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-jiaoxingfuwu"></i>
                    <div class="name">叫醒服务</div>
                    <div class="fontclass">.hd-jiaoxingfuwu</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-gonggao"></i>
                    <div class="name">公告</div>
                    <div class="fontclass">.hd-gonggao</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-wapchuxing"></i>
                    <div class="name">wap-出行</div>
                    <div class="fontclass">.hd-wapchuxing</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-yduijia"></i>
                    <div class="name">YDUI-加</div>
                    <div class="fontclass">.hd-yduijia</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-tupian"></i>
                    <div class="name">图片</div>
                    <div class="fontclass">.hd-tupian</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-canting"></i>
                    <div class="name">餐厅</div>
                    <div class="fontclass">.hd-canting</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-shangwuzhongxinr"></i>
                    <div class="name">商务中心r</div>
                    <div class="fontclass">.hd-shangwuzhongxinr</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-fengjing"></i>
                    <div class="name">风景</div>
                    <div class="fontclass">.hd-fengjing</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-youji2"></i>
                    <div class="name">游记</div>
                    <div class="fontclass">.hd-youji2</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-shuangyinhao-zuo-"></i>
                    <div class="name">双引号-左</div>
                    <div class="fontclass">.hd-shuangyinhao-zuo-</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-xin2"></i>
                    <div class="name">心</div>
                    <div class="fontclass">.hd-xin2</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-wode3"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.hd-wode3</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-yunshuzhongwuliu-xianxing"></i>
                    <div class="name">01运输中、物流-线性</div>
                    <div class="fontclass">.hd-yunshuzhongwuliu-xianxing</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-caigou-xianxing"></i>
                    <div class="name">05采购-线性</div>
                    <div class="fontclass">.hd-caigou-xianxing</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-songcanfuwu"></i>
                    <div class="name">送餐服务</div>
                    <div class="fontclass">.hd-songcanfuwu</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-dengpao"></i>
                    <div class="name">灯泡</div>
                    <div class="fontclass">.hd-dengpao</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-luxian"></i>
                    <div class="name">路线</div>
                    <div class="fontclass">.hd-luxian</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-dunpai"></i>
                    <div class="name">盾牌</div>
                    <div class="fontclass">.hd-dunpai</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-arrow"></i>
                    <div class="name">下箭头</div>
                    <div class="fontclass">.hd-arrow</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-zan2"></i>
                    <div class="name">赞</div>
                    <div class="fontclass">.hd-zan2</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-shouji"></i>
                    <div class="name">手机</div>
                    <div class="fontclass">.hd-shouji</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-xihuan"></i>
                    <div class="name">喜欢2</div>
                    <div class="fontclass">.hd-xihuan</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-xiaoeye"></i>
                    <div class="name"> 阅读小</div>
                    <div class="fontclass">.hd-xiaoeye</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-ditu"></i>
                    <div class="name">锦囊</div>
                    <div class="fontclass">.hd-ditu</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-youjigonglve"></i>
                    <div class="name">游记攻略</div>
                    <div class="fontclass">.hd-youjigonglve</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-xin-"></i>
                    <div class="name">心</div>
                    <div class="fontclass">.hd-xin-</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-dianhua"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.hd-dianhua</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-duihao"></i>
                    <div class="name">对号</div>
                    <div class="fontclass">.hd-duihao</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-xiangxia"></i>
                    <div class="name">向下</div>
                    <div class="fontclass">.hd-xiangxia</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-tishi"></i>
                    <div class="name">提示</div>
                    <div class="fontclass">.hd-tishi</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-pinglun"></i>
                    <div class="name">评论</div>
                    <div class="fontclass">.hd-pinglun</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-luxian-yuanquan"></i>
                    <div class="name">路线-圆圈</div>
                    <div class="fontclass">.hd-luxian-yuanquan</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-huifupinglun"></i>
                    <div class="name">回复评论</div>
                    <div class="fontclass">.hd-huifupinglun</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-chakan"></i>
                    <div class="name">查看</div>
                    <div class="fontclass">.hd-chakan</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-shoucang1"></i>
                    <div class="name">收 藏</div>
                    <div class="fontclass">.hd-shoucang1</div>
                </li>
            
                <li>
                <i class="icon iconfont hd-lvsechuhang"></i>
                    <div class="name">绿色出行</div>
                    <div class="fontclass">.hd-lvsechuhang</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">hd-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
